<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<title>下单</title>

<link rel="stylesheet" type="text/css" href="__JS__/mobileSelect/css/mobileSelect.css">
<script src="__JS__/mobileSelect/js/mobileSelect.min.js" type="text/javascript"></script>
<script src="__JS__/data.mobileSelect.js?v=0.01" type="text/javascript"></script>

<link type="text/css" rel="stylesheet" href="/static/css/s.common.css">
<link type="text/css" rel="stylesheet" href="/static/css/s.agent.css">
<link type="text/css" rel="stylesheet" href="/static/css/order_confirm.css">
<script type="text/javascript" src="/static/js/jquery.min.js?v=0.23"></script>
<script type="text/javascript" src="/static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script src='http://oss.nawen1413.com/js/vue.js'></script>
</head>

<body>

<div id="pages">

	<div class="g-reset g-col g-warp-scroll common-bs-wrapper" style="overflow: hidden;">
		<div class="__scroller" style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
			<div class="g-reset g-pd g-orange">请仔细核对订单信息</div>
			<div class='address-select-box'>
			
				<div class='location'><img src='__IMG__/location.png'></div>
				<div class='address-info'>
					{notempty name='data.address'}
					<div>
					<p><span id='consignee'>{$data.address.consignee}</span>　<span id='phonenum'>{$data.address.phonenum}</span><span style="display: inline-block;background: #5c8dff;color: #ffffff;padding: 0 14px; border-radius: 18px;line-height: 36px;margin-left:8px;display:none;">默认</span></p>
					<p id='address_full'>{$data.address.province}{$data.address.city}{$data.address.region}{$data.address.address}</p>
					</div>
					{else /}
					<div>
					<p><span id='consignee'>请选择收货地址</span><span id='phonenum'>&nbsp;</span></p>
					<p id='address_full'><span style='color:#a2a2a2;'>您尚未设置默认收货地址</span></p>
					</div>
					{/notempty}
				</div>
				<div class='address-select'>
					<img src='__IMG__/right.png'>
				</div>
				
			</div>
			<div class="g-reset g-flex g-fd-c g-m-b">
				<div>
					{volist name='data.product' id='v'}
					<div class="g-pd g-bb" style="background-color: rgb(249, 249, 249);">
						<div class="g-flex">
							<img src="{$v.productmainimg}" alt="" class="g-img-140">
							<div class="g-flex g-fd-c g-col g-pd-lr g-jc-sb">
								<div class="g-flex g-jc-sb">
									<div class="g-twoline g-col">{$v.productname}</div>
									<div>
										<p class="g-orange-dark">￥{$v.productprice}</p></div>
								</div>
								<div class="g-flex g-jc-sb">
									<span class="g-black-light"></span>
									<span class="g-black-middle g-pd-l">X{$v.buynum}</span>
								</div>
							</div>
						</div>
					</div>
					{/volist}
				</div>
			</div>
			
			<div class="g-form g-bb">
				<div class="__item">
					<label for="express_id_select">快递</label>
					<div style="flex:1;padding-right:40px;background:url(__IMG__/right.png) no-repeat right center;" id='express_id_select'>{$express.default.value}</div>
				</div>
			</div>
			
			<div class="g-form g-bb">
				<div class="__item">
					<label for="oMsg">买家留言</label>
					<input type="text" id="oMsg" placeholder="选填，请在这里留下您的要求" value=""></div>
			</div>
			
			<div class="g-reset g-flex g-fd-c g-bg-white g-pd g-m-b">
				<div class="g-flex g-jc-sb 2095">
					<div>商品总价</div>
					<div class="g-orange-dark">
						<p class="">￥{$data.orderamount}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="g-bg-white">
		<div class=" g-bt g-reset g-fixed g-tr" style="z-index: 10;">
			<div class="g-lh-80 g-tr g-col g-pd-r g-inline">内购金额加运费：
				<div class=" g-inline">
					<p class="g-orange-dark g-inline">￥<span id='neigouANDyunfei'><?php
					$d = $express['default']['expressprice'] + $data['cashamount'];
					echo $d;
					?></span></p>
				</div>，货款金额：
				<div class=" g-inline">
					<p class="g-orange-dark g-inline">￥{$data.orderamount}</p>
				</div>
			</div>
			<div class="g-bg-blue g-lh-80 g-tc g-inline" id="order-add" style="width: 150px;">提交订单</div></div>
	</div>
	
	
	<div class="c-share-back" data-func='goback'>
		<div class="__content">
			<i class="iconfont icon-goback __icon"></i>
		</div>
	</div>
	<script>
	function goback(){
		location.href = "{:url('Order/cart')}";
	}
	</script>
</div>


<!--收货地址列表-->
<div class="g-reset g-am-init g-reset-fixed address-list-box" id='v_address_list' v-show="show">
	<div class="g-bg-fixed"></div>
	<div class="g-fixed g-row" style="z-index: 50;">
		<p class="g-close-position "><span class='address-edit-title'>选择收货地址</span><i class="iconfont icon-close" v-on:click="show=false"></i></p>
		<div class="g-pd-lr address-select-box2" style="position:relative; height:500px; overflow-y: hidden; overflow-x:hidden;">
			<div class="am-list address-box" style="width:100%;height:100%;left:0;top:0;position:absolute;overflow-x:hidden;overflow-y:auto;">
				<!-----------地址地址地址------------->
				<div id="address_box">
					<div>
						<div class="g-bg-white g-m-b-20 address-item" v-for="item in addressList" :data-tsid="item.tsid" v-on:click="selectAddress($event,item.tsid)">
							<div class="g-bb g-pd">
								<div class="g-flex g-jc-sb g-m-b-20">
									<span>收货人：{{item.consignee}}</span>
									<span class="g-black-middle">{{item.phonenum}}</span>
								</div>
								<p class="">收货地址：{{item.province}} {{item.city}} {{item.region}} {{item.address}}</p>
							</div>
						</div>
					</div>
					<div class="g-btn-blue g-m-b-20" v-on:click="showAddBox" style="margin-top: 80px;">新增收货地址</div>
				</div>
				<!-----------地址地址地址 End------------->
			</div>
		</div>
	</div>
</div>
<!--收货地址列表 End-->

<!--添加地址-->
<div class="g-reset g-am-init g-reset-fixed address-add-box" id="v_address_add" style='z-index:2000' v-show="show">
	<div class="g-bg-fixed"></div>
	<div class="g-fixed g-row" style="z-index: 50;">
		<p class="g-close-position ">
			<span class='address-add-title'>添加收货地址</span>
			<i class="iconfont icon-close" v-on:click="show=false"></i>
		</p>
		<div class="g-pd-lr" style="min-height:480px;max-height: 490px; overflow-y: hidden; overflow-x:hidden;">
			<div class="am-list">
				<div class="am-list-body">
					<div class="common-input">
						<div class="g-bt _row __input" style="border-top:0;">
							<div class="__pd-l __col-3 g-text-over">收货人</div>
							<input type="text" class="__col-7" v-model="address.consignee" placeholder="请填写收货人姓名" style="height: 40px; margin-top: 20px; margin-bottom: 20px; line-height: 40px;">
						</div>
					</div>
					<div class="international-mobile" style="position: relative;">
						<div class="common-input">
							<div class="g-bt _row __input">
								<div class="__pd-l __col-3 g-text-over">手机号码</div>
								<input type="tel" class="__col-7" v-model="address.phonenum" value="" maxlength="11" placeholder="请填写手机号码" style="height: 40px; margin-top: 20px; margin-bottom: 20px; line-height: 40px;">
							</div>
						</div>
						<span style="position: absolute; right: -18px; top: 4px;">
							<div>
								<div class="am-list-item am-list-item-middle" style="position: absolute; right: 0px; top: -2px; width: 200px;border:0;">
									<div class="am-list-line no-after">
										<div class="am-list-extra">+86</div>
										<div class="am-list-arrow am-list-arrow-horizontal"></div>
									</div>
								</div>
							</div>
						</span>
					</div>
					<div>
						<div class="am-list-item am-list-item-middle g-bt" style="border-bottom:0;">
							<div class="am-list-line no-after" id='region_box'>
								<div class="am-list-content" style="color:#2e3136;width:25%;">省市区</div>
								<div class="am-list-extra" id="region_text"></div>
								<input type="hidden" v-model="address.province" />
								<input type="hidden" v-model="address.city" />
								<input type="hidden" v-model="address.region" />
								<div class="am-list-arrow am-list-arrow-horizontal"></div>
							</div>
						</div>
					</div>
					<div class='g-bt' style="max-height: 115px; overflow: scroll;">
						<textarea type="text" class="g-m-t g-pd-l" placeholder="智能识别：请输入街道门牌信息，支持黏贴全地址" v-model="address.address" id="address" style="width: 100%;overflow: auto;outline:0;"></textarea>
					</div>
				</div>
			</div>
		</div>
		<div style="height: 20px;"></div>
		<div class="g-tc g-lh-80 g-bg-blue" @click="address_save">保存</div>
	</div>
</div>
<!--编辑地址 End-->
	



<script>
var v_address_list = new Vue({
	el:'#v_address_list',
	data : {
		show : false,
		addressList : {$address}
	},
	methods : {
		//选择地址
		selectAddress(e,tsid){
			this.show = false;
			v_address_add.show = false;
			if(orderInfo.address.tsid != tsid){
				//重新计算快递费
				let pd = {
					'tsid':tsid,
					'products':JSON.stringify(orderInfo.products)
				};
				let loadindex = layer.open({type: 2});
				$.ajax({
					url : "{:url('Order/changeaddress')}",
					type : "POST",
					dataType : "JSON",
					data : pd,
					success : function(e){
						if(!e.flag){ return; }
						expressList = e.data.list;				
						if(typeof expressList[orderInfo.expressid] != 'undefined'){
							let expressprice = expressList[orderInfo.expressid]['expressprice'];
							let t = orderInfo.cashamount + expressprice;
							$('#neigouANDyunfei').html(t);
						}
					},error : function(){
					},complete : function(){
						layer.close(loadindex);
					}
				});
			}
			let ad = null;
			for(let i in this.addressList){
				if(this.addressList[i].tsid == tsid){
					ad = this.addressList[i];
					break;
				}
			}
			if(ad == null) return;
			orderInfo.address.tsid = ad.tsid;
			orderInfo.address.consignee = ad.consignee;
			orderInfo.address.phonenum = ad.phonenum;
			orderInfo.address.province = ad.province;
			orderInfo.address.city = ad.city;
			orderInfo.address.region = ad.region;
			orderInfo.address.address = ad.address;
			$('#address_full').html(ad.province+''+ad.city+''+ad.region+''+ad.address);
			$('#consignee').html(ad.consignee);
			$('#phonenum').html(ad.phonenum);
		},
		//展示添加地址框
		showAddBox : function(){
			v_address_add.show=true;
		}
	}
});
var v_address_add = new Vue({
	el:'#v_address_add',
	data : {
		//是否展示本添加地址的框框
		show : false,
		//当前录入的地址信息
		address : {
			consignee : '',
			phonenum : '',
			province : '',
			city : '',
			region : '',
			address : '', //详细地址
		}
	},
	methods : {
		address_save : function(){
			let postData = {
				action : 'add',
				tsid : 0,
				consignee : this.address.consignee,
				phonenum : this.address.phonenum,
				province : this.address.province,
				city : this.address.city,
				region : this.address.region,
				address : this.address.address,
			};
			if(postData.consignee == ''){
				layerMsg('收货人必填'); return;
			}
			if(postData.phonenum == ''){
				layerMsg('手机号码必填'); return;
			}
			if(postData.region == ''){
				layerMsg('请选择省市区'); return;
			}
			let that = this;
			$.post("{:url('Address/save')}",postData,function(e){
				if(e.flag){
					layerMsg(postData.action == 'add' ? '添加成功':'保存成功',function(){
						that.show = false;
						that.address.consignee = '';
						that.address.phonenum = '';
						that.address.province = '';
						that.address.city = '';
						that.address.region = '';
						that.address.address = '';
						v_address_list.addressList = e.data;
					});
				}else{
					layerMsg(postData.action == 'add' ? '添加失败':'保存失败');
				}
			},'JSON');
		}
	}
});
//订单信息
var orderInfo = {
	address : {
		tsid : {empty name='data.address'}""{else /}"{$data.address.tsid}"{/empty},
		consignee : {empty name='data.address'}""{else /}"{$data.address.consignee}"{/empty},
		phonenum : {empty name='data.address'}""{else /}"{$data.address.phonenum}"{/empty},
		province : {empty name='data.address'}""{else /}"{$data.address.province}"{/empty},
		city : {empty name='data.address'}""{else /}"{$data.address.city}"{/empty},
		region : {empty name='data.address'}""{else /}"{$data.address.region}"{/empty},
		address : {empty name='data.address'}""{else /}"{$data.address.address}"{/empty}
	},
	products : {$products},
	orderamount : {$data.orderamount},
	cashamount : {$data.cashamount},
	expressid : "{$express.default.id}",
	remark : ''
};

var expressList = {$express.listfull};

$(function(){
	let _height = $(window).height();
	$('.address-select-box2').css('height',_height * 0.8);
	//提交订单
	$("#order-add").click(function(){
		orderInfo.remark = $('#oMsg').val();
		if(orderInfo.address.tsid == ''){
			layerMsg('请选择收货地址'); return;
		}
		if(orderInfo.expressid == ''){
			layerMsg('请选择快递'); return;
		}
		$.post("{:url('Order/add')}",{'data':JSON.stringify(orderInfo)},function(e){
			if(e.flag){
				location.href = "{:url('Order/pay')}?orderid="+e.data;
			}else{
				layerMsg(e.info);
			}
		},'JSON');
	});
	//选择地址
	$('.address-select,.address-info').click(function(){
		v_address_list.show = true;
	});
	$('input[type="text"],input[type="number"],input[type="tel"]').attr('autocomplete','off');
	//输入法键盘位移
	$("input[type='text'],input[type='tel'],textarea").blur(function(){
		window.scroll(0,0);
	});
	//粘贴地址识别
	$("#address").bind("paste",function(e){
		if(typeof e.originalEvent == 'undefined'){
			layerMsg('获取失败，请手动输入'); return;
		}
		if(typeof e.originalEvent.clipboardData == 'undefined'){
			layerMsg('获取失败，请手动输入'); return;
		}
		var pastedData = e.originalEvent.clipboardData.getData('text');
		if(pastedData.length < 10){
			layerMsg('地址信息不正确'); return;
		}
		AI_Address(pastedData);
    });
});
function AI_Address(content){
	let loadindex = layer.open({type: 2});
	$.post("{:url('Address/shibie')}",{'content':content},function(e){
		if(e.flag){
			let success = setPositionWithValue(e.data.province,e.data.city,e.data.county,true);
			if(success){
				$('#region_text').html(e.data.province + ' ' + e.data.city + ' ' + e.data.county);
				v_address_add.address.consignee = e.data.name;
				v_address_add.address.phonenum = e.data.phone;
				v_address_add.address.province = e.data.province;
				v_address_add.address.city = e.data.city;
				v_address_add.address.region = e.data.county;
				v_address_add.address.address = e.data.address;
			}
		}
		layer.close(loadindex);
	},'JSON');
}
//根据中文省市县计算滚轮并定位
function setPositionWithValue(province,city,region,mohu){
	let i=-1,j=-1,k = -1;
	for(let a=0;a<SevStudio_Wap_Address.length;a++){
		if(mohu){
			//模糊匹配省份
			if(SevStudio_Wap_Address[a].value.substr(0,2) == province.substr(0,2)){
				i=a;
				break;
			}
		}else{
			if(SevStudio_Wap_Address[a].value == province){
				i=a;
				break;
			}
		}
	}
	if(i != -1){
		for(let a=0;a<SevStudio_Wap_Address[i].childs.length;a++){
			if(mohu){
				if(SevStudio_Wap_Address[i].childs[a].value.substr(0,2) == city.substr(0,2)){
					j=a;
					break;
				}
			}else{
				if(SevStudio_Wap_Address[i].childs[a].value == city){
					j=a;
					break;
				}
			}
		}
	}
	if(j != -1){
		for(let a=0;a<SevStudio_Wap_Address[i].childs[j].childs.length;a++){
			if(mohu){
				if(SevStudio_Wap_Address[i].childs[j].childs[a].value.substr(0,2) == region.substr(0,2)){
					k=a;
					break;
				}
			}else{
				if(SevStudio_Wap_Address[i].childs[j].childs[a].value == region){
					k=a;
					break;
				}
			}
		}
	}
	let not_found = [];
	if(i != -1){
		mobileSelect5.locatePosition(0,i);
	}else{
		//没找到省份
		not_found.push(province);
	}
	if(j != -1){
		mobileSelect5.locatePosition(1,j);
	}else{
		not_found.push(city);
	}
	if(k != -1){
		mobileSelect5.locatePosition(2,k);
	}else{
		not_found.push(region);
	}
	if(mohu && not_found.length > 0){
		//保存匹配失败的地址
		//识别结果跟滚轮对不上
		$.post("{:url('Address/collect')}",{'data' : not_found.join('-')},function(e){},'JSON');
	}
	return i != -1 && j != -1 && k != -1;
}

var expressSelect = new MobileSelect({
    trigger: '#express_id_select',
    title: '快递选择',
    wheels: [{
		data : {$express.list}
	}],
    position:[{$express.default.index}],
	callback:function(indexArr, data){
		orderInfo.expressid = data[0].id;
		if(typeof expressList[orderInfo.expressid] != 'undefined'){
			let expressprice = expressList[orderInfo.expressid]['expressprice'];
			let t = orderInfo.cashamount + expressprice;
			$('#neigouANDyunfei').html(t);
		}
	}
});

var mobileSelect5 = new MobileSelect({
	trigger: '#region_text',
	title: '选择地区',
	wheels: [{
		data : SevStudio_Wap_Address
	}],
	position: [0,0,0],
	transitionEnd:function(indexArr, data){
		//console.log(indexArr,data);
	},
	callback:function(indexArr, data){
		var address='',province,city,region;
		data.forEach(function (item, index) {
			address = address+item.value;
			if(index==0){
				province = item.value;
			}else if(index==1){
				city = item.value;
			}else if(index==2){
				region = item.value;
			}
		});
		$("#region_text").html(address);
		v_address_add.address.province = province;
		v_address_add.address.city = city;
		v_address_add.address.region = region;
	}
});

</script>
<style>
.am-list-item .am-list-line .am-list-extra {
    -webkit-flex-basis: 70%!important;
    -ms-flex-preferred-size: 70%!important;
    flex-basis: 70%!important;
}
</style>
</body>
</html>